<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>登陆</title>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/css/model/login/login.css">
</head>
<body>
<!-- 定义容器 -->
<div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-3"></div>

        <!-- 这一列为登陆表单 -->
        <div class="col-md-4 col-sm-6">
            <div class="panel panel-default">

                <!-- 登陆面板的标题 -->
                <div class="panel-title" style="text-align: center">
                    <h2>注册</h2>
                </div>

                <!-- 登陆面板的主体 -->
                <div class="panel-body">

                    <!-- 表单 -->
                    <form id="register_form" class="form-horizontal" style="">

                        <div class="form-group">
                            <label class="control-label col-md-4 col-sm-4">用户ID：</label>
                            <div class="col-md-7 col-sm-7">
                                <input type="text" id="userID" class="form-control"
                                        name="userID" readonly />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-4 col-sm-4">用户姓名：</label>
                            <div class="col-md-7 col-sm-7">
                                <input type="text" id="userName" class="form-control"
                                       placeholder="用户姓名" name="userName" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-4 col-sm-4"> <!-- <span class="glyphicon glyphicon-lock"></span> -->
                                密码：
                            </label>
                            <div class="col-md-7 col-sm-7">
                                <input type="password" id="password" class="form-control"
                                       placeholder="密码" name="password">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-4 col-sm-4"> <!-- <span class="glyphicon glyphicon-lock"></span> -->
                                住址：
                            </label>
                            <div class="col-md-7 col-sm-7">
                                <input type="text" id="location" class="form-control"
                                       placeholder="请输入公司地址：" name="location">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-4 col-sm-4"> <!-- <span class="glyphicon glyphicon-lock"></span> -->
                                性别：
                            </label>
                            <div class="col-md-7 col-sm-7">
                                <select id="sex" name="sex">
                                    <option value="0" selected>---请选择---</option>
                                    <option value="男" >---男---</option>
                                    <option value="女" >---女---</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-4 col-sm-4"> <!-- <span class="glyphicon glyphicon-lock"></span> -->
                                电话：
                            </label>
                            <div class="col-md-7 col-sm-7">
                                <input type="text" id="phone" class="form-control"
                                       placeholder="亲输入手机号码：" name="phone">
                            </div>
                        </div>
                        <div>
                            <div class="col-md-4 col-sm-4"></div>
                            <div class="col-md-4 col-sm-4">
                                <button id="register" type="submit" class="btn btn-primary">
                                    &nbsp;&nbsp;&nbsp;&nbsp;注册&nbsp;&nbsp;&nbsp;&nbsp;</button>
                            </div>
                            <div class="col-md-4 col-sm-4"></div>
                        </div>


                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-4 col-sm-3"></div>
    </div>
</div>

<script type="text/javascript"
        src="${pageContext.request.contextPath}/js/jquery-2.2.3.min.js"></script>
<script type="text/javascript"
        src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript"
        src="${pageContext.request.contextPath}/js/bootstrapValidator.min.js"></script>
<script type="text/javascript"
        src="${pageContext.request.contextPath}/js/jquery.md5.js"></script>

<script>

    $(function() {
        validatorInit();
        //显示系统默认分配新用户的id
        $.ajax({
            type:"POST",
            url:"account/get_register_id",
            dataType:"json",
            contentType:"application/json",
            //data:JSON.stringify(data),
            success:function(response){
                $("#userID").val(response.id);
            },
            error:function(data){
                // 处理错误
            }
        });
    });


    // 登陆信息加密模块
    function infoEncrypt(userID, password) {  // 删除 checkCode 参数
        var str1 = $.md5(password);
        var str2 = $.md5(str1 + userID);
        return str2;  // 直接返回 str2，不再需要 str3
    }

//注册判断
    function validatorInit() {
        $('#register_form').bootstrapValidator({
            message : 'This value is not valid',
            feedbackIcons : {
                valid : 'glyphicon glyphicon-ok',
                invalid : 'glyphicon glyphicon-remove',
                validating : 'glyphicon glyphicon-refresh'
            },
            fields : {
                userID : {
                    validators : {
                        notEmpty : {
                            message : '用户ID不能为空'
                        },regexp: {
                            regexp: '[0-9]+',
                            message: '只允许输入数字'
                        },
                        callback : {}
                    }
                },
                userName : {
                    validators : {
                        notEmpty : {
                            message : '用户姓名不能为空'
                        },
                        callback : {}
                    }
                },
                password : {
                    validators : {
                        notEmpty : {
                            message : '密码不能为空'
                        },
                        callback : {}
                    }
                },
                sex : {
                    validators : {
                        notEmpty : {
                            message : '性别不能为空'
                        },regexp: {
                            regexp: /^(男|女)$/,  // 正则匹配 "男" 或 "女"
                            message: '请选择性别--->男或女'
                        },
                        callback : {}
                    }
                },
                location : {
                    validators : {
                        notEmpty : {
                            message : '地址不能为空'
                        },
                        callback : {}
                    }
                },
                phone : {
                    validators : {
                        notEmpty : {
                            message : '手机号不能为空'
                        },
                        callback : {}
                    }
                }
            }
        })
            .on('success.form.bv', function(e) {
                // 禁用默认表单提交
                e.preventDefault();

                // 获取 form 实例
                var $form = $(e.target);
                // 获取 bootstrapValidator 实例
                var bv = $form.data('bootstrapValidator');

                // 发送id和密码到后端 进行验证
                var userID = $('#userID').val();
                var userName=$("#userName").val();
                var password = $('#password').val();
                var sex = $('#sex').val();
                var location = $('#location').val();
                var phone = $('#phone').val();


                // 加密
                password = infoEncrypt(userID, password)

                var data = {
                    "id" : userID,
                    "userName":userName,
                    "password" : password,
                    "sex" : sex,
                    "location" : location,
                    "phone" : phone
                }
                $.ajax({
                    type:"POST",
                    url:"account/register",
                    dataType:"json",
                    contentType:"application/json",
                    data:JSON.stringify(data),
                    success: function(response) {
                        if (response.result == 0) {
                            if (response.msg == "registerError") {
                                alert("ID或账号重复，请更换");
                                $("#userName").val("");
                                $("#password").val("");
                                $("#sex").val("");
                                $("#location").val("");
                                $("#phone").val("");
                            }
                        } else {
                            alert("注册成功，点击跳转登录界面");
                            window.location.href = "/login";
                        }
                    },
                    error:function(data){
                        // 处理错误
                    }
                });
            });
    }
</script>
</body>
</html>